import {Card, Form, Input, Checkbox, Button, message } from 'antd'
import logo from '@/assets/logo.png'
import './index.scss'
import { useStore } from '@/store'
import { useNavigate } from 'react-router-dom'

const Login = () => {
  const { loginStore } = useStore()
  const navigate = useNavigate()
  const onFinish = async (e) => {
    const {mobile, code} = e
    try {
     await loginStore.login({ mobile, code })
      message.success('登录成功')
      navigate('/')
    } catch (e) {
      message.error(e.response?.data?.message || '登录失败')
    }
  }
  return (
    <div className='login'>
      <Card className='login-container'>
        {/* LOGO */}  
        <img className='login-logo' src={logo} alt=''></img>
        {/* 登录表单 */}
        <Form
          validateTrigger={['onBlur']}
          initialValues={{
            mobile: '13811111111',
            code: '246810',
            remember: true,
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="mobile"
            rules={[
              {
                required: true,
                message: '请输入手机号!',
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '请输入正确的手机号！',
                validateTrigger: 'onBlur'
              }
            ]}
          >
            <Input size='large' placeholder='请输入手机号'/>
          </Form.Item>

          <Form.Item
            name="code"
            rules={[
              {
                required: true,
                message: '请输入验证码',
              },
              {
                len: 6,
                message: '验证码6位字符',
                validateTrigger: 'onBlur'
              }
            ]}
          >
            <Input size='large' placeholder='请输入验证码!'/>
          </Form.Item>

          <Form.Item
            name="remember"
            valuePropName="checked"
          >
            <Checkbox className='login-checkbox-label'> 我已阅读并同意「用户协议」和「隐私协议」 </Checkbox>
          </Form.Item>

          <Form.Item
          >
            <Button type="primary" htmlType="submit" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login